import React, { Component } from 'react'
// Route组件用来定义路由规则和匹配成功后要渲染的组件
//  + exact 设置为true精确匹配，默认不用写为false
//  + path 路由规则 它是模糊匹配
//  + component/render 指定要匹配成功后渲染的组件
// Link/NavLink 声明式导航组件,NavLink有激活样式，而Link没有，编译为html都为a标签
//  + to string|object 跳转到的路径
// NavLink
//  + exact 严格匹配
//  + activeClassName 自定义激活样式的名称，默认激活样式的名称为 active
// Switch 匹配路由规则只会执行1条规则
import { Route, Link, NavLink, Switch } from 'react-router-dom'

import Home from './views/Home'
import About from './views/About'
import Detail from './views/Detail'

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <NavLink exact to="/">
            首页
          </NavLink>
          &nbsp;&nbsp;|&nbsp;&nbsp;
          <NavLink to="/about">关于</NavLink>
        </div>
        <hr />
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/detail/:id?" component={Detail} />
          <Route path="/" component={Home} />
        </Switch>
        <hr />
        <div>底部声明</div>
      </div>
    )
  }
}

export default App
